<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志查看器 - WechatSync</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: #409EFF;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 18px;
        }
        .controls {
            display: flex;
            gap: 10px;
        }
        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        .refresh-btn {
            background: #67C23A;
            color: white;
        }
        .refresh-btn:hover {
            background: #5daf34;
        }
        .clear-btn {
            background: #F56C6C;
            color: white;
        }
        .clear-btn:hover {
            background: #dd6161;
        }
        .download-btn {
            background: #E6A23C;
            color: white;
        }
        .download-btn:hover {
            background: #d4a043;
        }
        .log-container {
            padding: 20px;
            max-height: 600px;
            overflow-y: auto;
            background: #fafafa;
        }
        .log-entry {
            margin: 5px 0;
            padding: 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1.4;
            word-break: break-all;
        }
        .log-entry.log {
            background: #e6f7ff;
            border-left: 3px solid #1890ff;
        }
        .log-entry.error {
            background: #fff1f0;
            border-left: 3px solid #ff4d4f;
        }
        .log-entry.warn {
            background: #fffbe6;
            border-left: 3px solid #faad14;
        }
        .no-logs {
            text-align: center;
            color: #999;
            padding: 40px;
            font-size: 14px;
        }
        .status {
            padding: 10px 20px;
            background: #f0f9ff;
            border-bottom: 1px solid #e6f7ff;
            font-size: 12px;
            color: #666;
        }
        .error-message {
            background: #fff1f0;
            border: 1px solid #ffccc7;
            color: #cf1322;
            padding: 15px;
            margin: 20px;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📝 WechatSync 调试日志查看器</h1>
            <div class="controls">
                <button class="refresh-btn" onclick="loadLogs()">🔄 刷新日志</button>
                <button class="download-btn" onclick="downloadLogs()">💾 下载日志</button>
                <button class="clear-btn" onclick="clearLogs()">🗑️ 清除日志</button>
            </div>
        </div>
        <div class="status" id="status">准备就绪</div>
        <div class="log-container" id="logContainer">
            <div class="no-logs">暂无日志，点击"刷新日志"按钮加载日志</div>
        </div>
    </div>

    <script>
        // 日志查看器功能
        async function loadLogs() {
            const statusEl = document.getElementById('status');
            const containerEl = document.getElementById('logContainer');
            
            try {
                statusEl.textContent = '正在加载日志...';
                
                // 从chrome.storage.local获取日志
                const result = await chrome.storage.local.get(['wechatsync_logs', 'wechatsync_last_log_time']);
                const logs = result.wechatsync_logs || [];
                const lastTime = result.wechatsync_last_log_time;
                
                if (logs.length === 0) {
                    containerEl.innerHTML = '<div class="no-logs">暂无日志记录</div>';
                    statusEl.textContent = '没有找到日志';
                    return;
                }
                
                // 解析并显示日志
                let html = '';
                logs.forEach(log => {
                    let logType = 'log';
                    let cleanLog = log;
                    
                    // 解析日志类型
                    if (log.includes('ERROR:')) {
                        logType = 'error';
                        cleanLog = log.replace('ERROR:', '');
                    } else if (log.includes('WARN:')) {
                        logType = 'warn';
                        cleanLog = log.replace('WARN:', '');
                    }
                    
                    html += `<div class="log-entry ${logType}">${cleanLog}</div>`;
                });
                
                containerEl.innerHTML = html;
                containerEl.scrollTop = containerEl.scrollHeight;
                
                const timeStr = lastTime ? new Date(lastTime).toLocaleString('zh-CN') : '未知';
                statusEl.textContent = `共 ${logs.length} 条日志 | 最后更新时间: ${timeStr}`;
                
            } catch (error) {
                console.error('加载日志失败:', error);
                containerEl.innerHTML = `<div class="error-message">加载日志失败: ${error.message}</div>`;
                statusEl.textContent = '加载日志失败';
            }
        }
        
        async function downloadLogs() {
            try {
                const result = await chrome.storage.local.get(['wechatsync_logs']);
                const logs = result.wechatsync_logs || [];
                
                if (logs.length === 0) {
                    alert('暂无日志可下载');
                    return;
                }
                
                const logContent = logs.join('\n');
                const blob = new Blob([logContent], { type: 'text/plain;charset=utf-8' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `wechatsync_debug_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.log`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                
                document.getElementById('status').textContent = '日志下载成功';
            } catch (error) {
                console.error('下载日志失败:', error);
                alert('下载日志失败: ' + error.message);
            }
        }
        
        async function clearLogs() {
            if (confirm('确定要清除所有日志吗？此操作不可恢复。')) {
                try {
                    await chrome.storage.local.remove(['wechatsync_logs', 'wechatsync_last_log_time']);
                    document.getElementById('logContainer').innerHTML = '<div class="no-logs">日志已清除</div>';
                    document.getElementById('status').textContent = '日志已清除';
                } catch (error) {
                    console.error('清除日志失败:', error);
                    alert('清除日志失败: ' + error.message);
                }
            }
        }
        
        // 页面加载时自动加载日志
        document.addEventListener('DOMContentLoaded', function() {
            loadLogs();
            
            // 每30秒自动刷新一次
            setInterval(loadLogs, 30000);
        });
        
        // 添加键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'r') {
                e.preventDefault();
                loadLogs();
            }
            if (e.ctrlKey && e.key === 'd') {
                e.preventDefault();
                downloadLogs();
            }
        });
    </script>
</body>
</html>